<template>
  <div id="payEditEmployee">
    <div class="title"></div>
    <div class="content">
      <div  class="add_employee_content" v-if="personTaxInfo">
        <div class="title">What are  {{personModel.firstName?personModel.firstName:""}}{{personModel.mi?' '+personModel.mi:""}}{{personModel.lastName?' '+personModel.lastName:""}}'s withholdings?</div>
        <el-form ref="addPersonForm" :model="personModel" :rules="rules">
          <el-steps  direction="vertical" :active="5">
            <el-step title="">
              <div slot='description' class="form_content">
                <el-row >
                  <el-col :span="4" :offset='1'>
                    <el-form-item  class="form_item" label="FirstName" prop="firstName">
                      <el-input v-model="personModel.firstName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset='1'>
                    <el-form-item class="form_item" label="M.L">
                      <el-input v-model="personModel.mi"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" :offset='1'>
                    <el-form-item  class="form_item" label="LastName" prop="lastName">
                      <el-input v-model="personModel.lastName"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--  <el-col :span="3" :offset='1'>
                      <el-form-item  class="form_item" label="Gender" >
                        <el-select v-model="personModel.gender">
                          <el-option v-for="(item,key) in personTaxInfo.gender" :label="item.showName" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>-->
                  <el-col :span="6" :offset='1'>
                    <el-tooltip  class="item" effect="dark" content="the format is like '333-22-4444' " placement="right">
                      <el-form-item class="form_item" label="Social Security number"  prop="ssn">
                        <el-input v-model="personModel.ssn"></el-input>
                      </el-form-item>
                    </el-tooltip>
                  </el-col>
                </el-row>
                <el-row >
                  <el-col :span="16" :offset='1'>
                    <el-form-item  class="form_item" label="Home Address" prop="homeAddress">
                      <el-input v-model="personModel.homeAddress"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="5" :offset='1'>
                    <el-form-item  class="form_item" label="City or Town" prop="hCityTown">
                      <el-input v-model="personModel.hCityTown"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5" :offset='1'>
                    <el-form-item  class="form_item" label="State" prop="hState">
                      <el-select v-model="personModel.hState">
                        <el-option v-for="(item,key) in personTaxInfo.state" :key="key"  :label="item.showName" :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5" :offset='1'>
                    <el-tooltip  class="item" effect="dark" content=" 5 numbers like '12345' " placement="right">
                      <el-form-item  class="form_item" label="Zip Code" prop="hZipCode">
                        <el-input v-model="personModel.hZipCode"></el-input>
                      </el-form-item>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </div>
            </el-step>
            <el-step title="">
              <el-row slot='description' class="form_content" >
                <el-col :offset='1'>
                  <el-radio-group v-model="personModel.w4FillStatus" style="line-height:33px">
                    <template v-for="(item,key) in personTaxInfo.w4FillStatus"  >
                      <el-radio  :label="parseInt(item.value)">{{item.showName}}</el-radio><br>
                    </template>
                  </el-radio-group>
                </el-col>
              </el-row>
            </el-step>
            <el-step title="">
              <el-row slot='description' class="form_content">
                <el-col :offset='1' :span="11">
                  Total number of allowances you are claiming
                </el-col>
                <el-col :offset='1' :span="3">
                  <el-input-number  v-model="personModel.w4Allowance" size="small" :min="0" :max="30"></el-input-number>
                </el-col>
              </el-row>
            </el-step>
            <el-step title="">
              <el-row slot='description' class="form_content">
                <el-col :offset='1' :span="11">
                  Additional amount, if any, you want withheld from each paycheck
                </el-col>
                <el-col :offset='1' :span="3">
                  <el-input-number  v-model="personModel.w4AddAmount" size="small" :min="0" :max="30"></el-input-number>
                </el-col>
              </el-row>
            </el-step>
          </el-steps>
          <div class="form_content">
            <ul class="other_info_form">
              <li  v-if="personTaxInfo.isStateTax ==1" @click="openHideInfo" class="item">
                <span class="iconfont">&#xe606;</span>
                <span class="title">{{personTaxInfo.stateName}} state taxes</span>
                <ul class="hide_info">
                  <li>We've filled out li's state withholding based on the Form W-4 above (They're usually the same)</li>
                  <li>
                    <el-row>
                      <el-col :span="4">
                        <el-form-item  class="form_item" label="Filing status"  >
                          <el-select v-model="personModel.sFillStatus">
                            <el-option v-for="(item,key) in personTaxInfo.stateFillStatus" :label="item.showName" :key="key"  :value="parseInt(item.value)"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4" :offset="1">
                        <el-form-item  class="form_item" label="Allowances"  >
                          <el-input-number  v-model="personModel.sAllowance" size="small" :min="0" :max="30"></el-input-number>
                        </el-form-item>
                      </el-col>
                      <el-col :span="1" :offset="1">
                        <el-form-item  class="form_item" label=" "  style="text-align: right;margin-right: 8px" >
                          $
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item  class="form_item" label="Additional amount"  >
                          <el-input-number  v-model="personModel.sAddAmount" size="small" :min="0"></el-input-number>
                        </el-form-item>
                      </el-col>

                    </el-row>
                  </li>
                </ul>
              </li>
              <li v-if="false"  @click="openHideInfo" class=" item">
                <span class="iconfont">&#xe606;</span>
                <span class="title">Tax exemptions</span>
                <ul class="hide_info">
                  <li>These are not common.</li>
                  <li>Anne Hathaway doesn't have to pay the following taxes</li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="add_person_btn_group">
            <el-button type="primary" @click="submit">Done</el-button>
            <el-button @click="$router.back()">Cancel</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components:{

    },
    data:function(){
      var validateSSN = function (rule, value, callback) {
          var reg = /^\d{3}-\d{2}-\d{4}$/;
          if (reg.test(value)) {
            callback();
          } else {
            callback(new Error('the SSN format is error'));
          }
      }
      var validateZipCode = function (rule, value, callback) {
        var reg = /\d{5}/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('the zipCode format is error'));
        }
      }
      return{
        personModel:{
          "firstName":null,
          "mi":null,
          "lastName":null,
          "gender":null,//1,2,3
          "ssn":null,//社会安全号
          "homeAddress":null,//家庭详细地址
          "hCityTown":null,
          "hState":null,
          "hZipCode":null,
          "w4FillStatus":null,//联邦报税身份
          "w4Allowance":null,
          "w4AddAmount":null,
          "sFillStatus":null,//州报税身份
          "sAllowance":null,
          "sAddAmount":null,
        },
        rules:{
          'firstName':[
            {required:true,message:"firstName must be required!"}
          ],
          'lastName':[
            {required:true,message:"lastName must be required!"}
          ],
          'ssn':[
            {required:true,message:"ssn must be required"},
            {validator: validateSSN, trigger: 'blur'},
          ],
          'homeAddress':[
            {required:true,message:"homeAddress must be required!"}
          ],
          'hCityTown':[
            {required:true,message:"City must be required!"}
          ],
          'hState':[
            {required:true,message:"State must be required!"}
          ],
          'hZipCode':[
            {required:true,message:"ZipCode must be required!"},
            {validator: validateZipCode, trigger: 'blur'},
          ]
        }
      }
    },
    computed:{
      personTaxInfo(){
        var data;
        if(this.$store.getters.personTaxInfo)
          data =  this.$store.getters.personTaxInfo.personInfo;
        if(data){
            for(var i in  this.personModel){
                if(data[i]){
                  this.personModel[i] = data[i];
                }
            }
          //  this.personModel = Object.assign(this.personModel,data.personInfo)
        }
        return this.$store.getters.personTaxInfo;
      }
    },
    watch:{
      'personModel.sFillStatus':function (value) {
        if(value&&value==-1){
            this.personModel.sFillStatus = null;
        }
      }
    },
    created:function(){
      this.$store.dispatch("getPersonTaxInfo",{personId:this.getPersonId()});
    },
    activated:function(){
      //this.$store.dispatch("getPersonTaxInfo",{personId:this.getPersonId()});
    },
    mounted:function(){

    },
    methods:{
      back:function(){
        this.$router.push('/payRoll/payRollCenter');
      },
      openHideInfo:function (e) {
        var li =$(e.target).closest('li');
        li.toggleClass('active');
        li.find('.hide_info').slideToggle(250);
      },
      getPersonId(){
        return this.$route.params.id
      },
      /**
       *验证并提交表单
       */
      submit(){
        var t = this;
        t.$refs.addPersonForm.validate((valid) => {
          if (valid) {
            var param = t.personModel;
            param.personId = t.getPersonId();
            t.$store.dispatch('modifyPersonTaxInfo',param).then(function () {
              t.$message.success('edit success');
              t.$router.back();
              //相关成功操作
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" @scoped >

  @import "../../assets/css/variable";
  #payEditEmployee{
    >.content{
      padding: 0;
    }
  }
  .add_employee_content {
      min-height: 100%;
      padding: 40px;
      >.title{
        padding-left: 80px;
        font-size: 20px;
        line-height: 50px;
      }
      .form_content{
        width: 900px;
        margin-bottom: 20px;
        line-height: 30px;
        font-size: 14px;
        color: #333;
        .el-form-item{
          .el-form-item__label{
            float: none;
          }
        }
        .other_info_form{
            line-height: 40px;
            padding: 12px 30px 12px 70px;
            >li{
              cursor: pointer;
              .iconfont{
                margin-right: 20px;
                display: inline-block;
                transition:  transform .25s;
                transform: rotate(90deg);
              }
              .num{
                padding:1px 5px;
                border-radius: 16px;
                font-size: 12px;
                color: #fff;
                margin-left: 20px;
                &.warn_color{
                  background-color: orangered;
                }
                &.success_color{
                  background-color: #72ca5c;
                }
              }
              &:hover{
                .iconfont,.title{
                  color: $activeColor;
                }
              }
              &.active{
                .iconfont{
                  transform: rotate(180deg);
                }
              }
              .hide_info{
                padding-left: 50px;
                overflow: hidden;
                display: none;
                li{
                  padding-left: 12px;
                  a{
                    color: #666;
                    &:hover{
                      color: $activeColor;
                    }
                  }
                  &:last-child{
                    border: none;
                  }
                }
            }
          }

        }
      }
      .add_person_btn_group{
        padding-left: 70px;
      }
    }
</style>
